<template>
  <div class="login-wrapper">
    <img class="logo" :src="logo" />
    <el-form
      ref="login"
      :rules="rules"
      :model="form"
      label-width="150"
      style="width:100%;"
      @keydown.enter.native="submit"
    >
      <!-- 线上版本登录方式 -->
      <el-form-item label="帐号" prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入帐号" type="text" clearable></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
		<el-input v-model="form.code" placeholder="请输入验证码"></el-input>
		<el-button :disabled="codeType" style="position: absolute;right: 0px;top: 0px; width: 100px;margin:3px 4px 0 -104px;padding: 8px 6px" @click="code" type="primary" >
			{{codeType?s:'获取验证码'}}
		</el-button>
      </el-form-item>
    </el-form>
    <el-button
      type="primary"
      @click="submit"
      style="width:100%; margin-top: 6px;"
      :loading="loading"
    >登录</el-button>
  </div>
</template>

<script>
import { Form, FormItem, Message } from 'element-ui'
import logo from '../../assets/image/logo.png'
const checkUserID = (rule, value, callback) => {
  if (!/^[a-zA-Z][a-zA-Z0-9_]{3,23}$/.test(value)) {
    callback(new Error('不合法（字母开头+字母/数字，长度4-24)'))
  } else {
    callback()
  }
}
export default {
  name: 'Login',
  components: {
    ElForm: Form,
    ElFormItem: FormItem,
  },
  data() {
    return {
      form: {
        mobile: '15600001111',
        code: ''
      },
      rules: {
        mobile: [
          { required: true, message: '请输入帐号', trigger: 'blur' },
          { validator: checkUserID, trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      logo: logo,
      registerVisible: false,
      loading: false, codeType: false, s: 60
    }
  },
  methods: {
    code() {
      let _this=this
      if (!(/^1[3456789]\d{9}$/.test(this.form.mobile))) {
        this.msg='请输入正确的帐号'
        return
      }
      this.msg=''
      this.$http(this.GLOBAL.sendcode,{mobile:this.form.mobile,channel:1},(res)=>{
        if (res.data.code==0) {
          // _this.$message({
          //   message:res.data.message,
          //   type: 'success'
          // });
          _this.codeType=true
          var codeTime=setInterval(function() {
            _this.s--
            if (_this.s<=0) {
              clearInterval(codeTime)
              _this.s=60
              _this.codeType=false
            }
          },1000)
        }else{
          // console.log(res)
          Message.error(res.data.message)
        }
      },{method:'post'})
    },
    submit() {
		this.$http(this.GLOBAL.login,{
          code: this.form.code,
          mobile: this.form.mobile
		},(res)=>{
          // console.log(res)
          if (res.data.code==0) {
            this.login(res.data.data.member.id,res.data.data.sin,res.data.data.token)
          } else {
            Message.error(res.data.message)
          }
		})
		// this.$refs['login'].validate(valid => {
		//   if (valid) {
		//     this.login()
		//   }
		// })
    },
    login(userID,userSig,token) {
      this.loading = true
      this.tim
        .login({
          userID: String(userID),
          userSig:userSig
        })
        .then(() => {
          this.loading = false
          this.$store.commit('toggleIsLogin', true)
          // eslint-disable-next-line no-mixed-spaces-and-tabs
		  this.$store.commit('toggleToken',token)
          this.$store.commit('startComputeCurrent')
          this.$store.commit({
            type: 'GET_USER_INFO',
            userID: String(userID),
            userSig: userSig,
            sdkAppID: window.genTestUserSig('').SDKAppID
          })
          this.$store.commit('showMessage', {
            type: 'success',
            message: '登录成功'
          })
        })
        .catch(error => {
          this.loading = false
          this.$store.commit('showMessage', {
            message: '登录失败：' + error.message,
            type: 'error'
          })
        })
    },
  }
}
</script>

<style lang="stylus" scoped>
.login-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 400px;
  padding: 20px 80px 50px;
  background: $white;
  color: $black;
  border-radius: 5px;
  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 0.3);

  .logo {
    width: 130px;
    height: 130px;
  }

  .register-button {
    width: 100%;
    margin: 6px 0 0 0;
  }

  .user-selector {
    width: 100%;
  }
}
</style>
